<template>
    <div class="book-list">

        <!-- 搜索 -->
        <div class="search-box">
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="searchForm.name" placeholder="书名" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.author" placeholder="作者" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchForm.userName" placeholder="用户名" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="searchForm.cateId" placeholder="类别" clearable>
                        <el-option v-for="(item, index) in cateData" :key="index" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searInfo">查询</el-button>
                </el-form-item>
            </el-form>
        </div>


        <!-- 编辑 -->
        <div class="edit-box">
            <el-dialog title="编辑信息" :visible.sync="editDialogVisible">
                <el-form :model="editForm" label-width="80px">
                    <el-form-item label="code">
                        <el-input v-model="editForm.code" autocomplete="off" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="角色">
                        <el-input v-model="editForm.name" autocomplete="off" clearable></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editInfo">确 定</el-button>
                </div>
            </el-dialog>
        </div>


        <!-- 表格： -->
        <el-table v-loading="loading" element-loading-spinner="el-icon-loading" :data="tableData"
            :header-cell-style="{ height: '40px', background: '#f5f7fa', color: '#606266' }">
            <el-table-column prop="name" label="书名" width=""></el-table-column>
            <el-table-column prop="author" label="作者" width=""></el-table-column>
            <el-table-column prop="userName" label="用户" width="" v-if="roleId != 3"></el-table-column>
            <el-table-column prop="type"  :formatter="formatType" label="归还类型" width=""></el-table-column>
            <el-table-column prop="categoryName" label="所属类别" width=""></el-table-column>
            <!-- <el-table-column prop="picture" label="图片" width=""></el-table-column> -->
            <!-- <el-table-column prop="deadline" label="最迟归还日期" width=""></el-table-column> -->
            <el-table-column prop="returnTime" label="归还日期" width=""></el-table-column>
            <!-- <el-table-column prop="status" :formatter="formatStatus" label="是否允许借阅" width=""></el-table-column> -->
            <!-- <el-table-column prop="location" label="图书存放位置" width=""></el-table-column> -->
            <!-- <el-table-column prop="publicationInformation" label="出版信息" width=""></el-table-column> -->
            <!-- <el-table-column prop="description" label="图书描述" width=""></el-table-column> -->
            <!-- <el-table-column prop="createTime" label="入库时间" width=""></el-table-column> -->
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="infoBtn(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="pagination">
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
                    layout="total, prev, pager, next, jumper" :total="totalRecord"></el-pagination>
            </div>
        </div>
    </div>
</template>



<script>
import { cateList } from '@/api/category'
import { hisList, hisInfo} from '@/api/hisLend'

export default {

    methods: {
        formatType(row, column, cellValue){
            if (cellValue == 0)
                return '正常归还'
            else
                return '逾期归还'
        },
        // 获取信息api
        getList(params) {
            this.loading = true;
            let objParams = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...params,
                ...this.searchForm
            }

            hisList(objParams).then(res => {
                this.loading = false;
                const { list, total } = res.data
                this.totalRecord = total;
                this.tableData = list;
            }).catch(error => {
                reject(error)
            })
        },
        // 获取信息api
        getCateList() {
            cateList({}).then(res => {
                const { list, total } = res.data
                this.cateData = list;
            }).catch(error => {
                reject(error)
            })
        },
        // 删除api
        delInfo(id) {
            console.log(id)
            delBook({ id: id }).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.getList({})
            }).catch(error => {
                reject(error)
            })
        },
        // 添加api
        addInfo() {
            console.log(JSON.stringify(this.addForm))
            let data = new FormData()
            data.append("file", this.fileInfo)
            data.append("data", JSON.stringify(this.addForm))
            addBook(data).then(res => {
                this.getList({})
                this.addDialogVisible = false
            }).catch(error => {
                reject(error)
            })
        },
        // 编辑api
        editInfo() {
            updateBook({ ...this.editForm }).then(res => {
                this.getList({})
                this.editDialogVisible = false
            }).catch(error => {
                reject(error)
            })
        },


        // 封面上传
        handleAvatarSuccess(file, fileList) {
            this.coverImg = URL.createObjectURL(file.raw);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList, "ddddd");
        },
        // 文件格式验证
        beforeAvatarUploada(file) {
            let index = file.name.lastIndexOf(".");
            let extension = file.name.substr(index + 1);
            let extensionList = [
                "png",
                "PNG",
                "jpg",
                "JPG",
                "jpeg",
                "JPEG",
                "bmp",
                "BMP",
            ];
            const isLt2M = file.size / 1024 / 1024 < 10;
            if (!isLt2M) {
                this.$message({
                    message: "封面不可超出10M",
                    type: "warning",
                    center: true,
                });

                return false;
            } else if (extensionList.indexOf(extension) < 0) {
                this.$message({
                    message: "当前文件格式不支持",
                    type: "error",
                    center: true,
                });

                return false;
            } else {
                this.fileInfo = file;
                return false
            }
        },



        //分页
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList({});
        },
        //查询
        searInfo() {
            this.getList({});
        },
        closeAddBtn() {
            this.$refs['addForm'].resetFields();
        },
        delBtn(row) {
            let vm = this
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                vm.delInfo(row.id)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        editBtn(row) {
            this.editDialogVisible = true;
            this.editForm = { ...row }
        },
        infoBtn(row){
            this.$router.push({
                path: "/mybook/his_info",
                query: { id: row.id }
            });
        }

    },
    created() {
        this.getList()
        this.getCateList()
        this.roleId = this.$store.state.user.roleId
    },
    data() {
        return {
            roleId: '',
            fileInfo: '',
            loading: false,
            tableData: [],
            totalRecord: null,
            pageNum: 1,
            pageSize: 10,
            cateData: [],
            searchForm: {
                author: '',
                cateId: '',
                name: '',
                userName: ''
            },
            coverImg: '',
            addDialogVisible: false,
            editDialogVisible: false,
            addForm: {
                name: '',
                author: '',
                totalNumber: '',
                spareNumber: '',
                status: '',
                location: '',
                publicationInformation: '',
                description: '',
                cateId: ''
            },
            editForm: {
                code: '',
                name: '',
            },
        }
    }
}
</script>



<style  lang="scss" scoped>
.book-list {
    margin: 10px 30px;

    .add-box {
        margin-top: -10px;
        margin-bottom: 10px;
    }

    /**分页*/
    .pagination {
        text-align: right;
        min-width: 400px;
        background: #fff;
    }

    .el-pagination {
        padding: 10px !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

}
</style>




